<script setup lang="ts">
import HintButton from "@/views/useAttrs/HintButton.vue";
import {Edit} from "@element-plus/icons-vue"
const handler1 = (event: any) =>{
  // alert(event)
  console.log(event);
}
const handler = () =>{
  alert(1234)
  // console.log(event);
}
// Vue3框架提供一个方法useAttrs方法,它可以获取组件身上的属性和事件
</script>

<template>
  <div class="box">
    <h1>useAttrs</h1>
    <el-button type="primary" size="small" :icon="Edit"></el-button>
<!--    自定义组件和事件-->
    <HintButton type="primary" size="small" :icon="Edit" title="编辑"  @xxx="handler1"></HintButton>
<!--     原生Dom事件 此处注意事件冒泡导致触发两次-->
<!--    <HintButton type="primary" size="small" :icon="Edit" title="编辑"  @click.stop="handler"></HintButton>-->
  </div>
</template>

<style scoped>
.box {
  height: 100vh;
  background: skyblue;
}
</style>
